<template>
  <div class="user-info">
    <el-avatar class="avatar" :size="32" src="/imgs/user-avatar-default.png" />
    <el-dropdown placement="bottom-start" @command="handleCommand">
      <div class="username">{{ usersStore.user.username }}</div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="info" :icon="Dish">个人信息</el-dropdown-item>
          <el-dropdown-item command="pwd" :icon="ToiletPaper" divided>修改密码</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-button type="primary" link @click="handlerClickBtnLogout">退出</el-button>
    <DialogPersonalCenter ref="dialogPersonalCenter" />
  </div>
</template>
<script setup lang="ts">
import { useUsersStore } from '../../stores'
// import { useRouter } from 'vue-router'
import Storage from '../../utils/storage'
import { ref } from 'vue'
import DialogPersonalCenter from './DialogPersonalCenter.vue'
import { ToiletPaper, Dish } from '@element-plus/icons-vue'

const usersStore = useUsersStore()
// const router = useRouter()
const dialogPersonalCenter = ref()

const handlerClickBtnLogout = () => {
  // usersStore.setAllState({ username: '', password: '', token: '' })
  Storage.clear()
  usersStore.$reset()
  // router.push({ name: 'Login' })
  window.location.replace('/login')
}

const handleCommand = (command: string) => {
  switch (command) {
    case 'info':
      // router.push({ name: 'PersonalCenter' })
      // console.log({ name: 'UserInfo' })
      dialogPersonalCenter.value?.openDialog()
      break
    case 'pwd':
      // router.push({ name: 'PersonalCenter' })
      // console.log({ name: 'ChangePwd' })
      dialogPersonalCenter.value?.openDialog()
      break
  }
}
</script>

<style lang="scss" scoped>
.user-info {
  display: flex;
  align-items: center;
  margin-right: 8px;
  .username {
    margin: 0 8px;
    cursor: default;
  }
}
</style>
